<template>

  <div class="tiaozhuantwo">
      <div class="xiaokuai" v-for="(v, i) in kapian" :key="i">
          <div class="icontu">
              <span :class="['iconfont', v.icon]"></span>
          </div>
          <div class="icontext">{{v.text}}</div>
          <div class="fuhao">
              <span :class="['iconfont', v.iconhao]"></span>
          </div>
      </div>
      
  </div>
 
</template>
 
<script>
export default {
    data() {
        return {
           kapian:[
               {
                   icon:"iconfont icon-denghao",
                   text:"运动记录",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"健康生活",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"心脏健康",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"体重管理",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"睡眠",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"压力",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"血氧饱和度",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"血糖管理",
                   iconhao:"iconfont icon-chahao"
               },
                 {
                   icon:"iconfont icon-denghao",
                   text:"血压",
                   iconhao:"iconfont icon-chahao"
               },

           ] 
        }
    }
}
</script>

<style scoped>
    .tiaozhuantwo{
        margin-top: .8rem;
        width:100%;
        height: 5.4rem;
        background: #fff;
    }
    .xiaokuai{
        display: flex;
        justify-content: space-between;
       width: 95%;
       height: .6rem;
        margin: auto;
    }
    .icontu{
        display: flex;
        align-items: center;
        justify-content: center;
        width: .6rem;
        height: .6rem;
        font-size: .3rem;
    }
   .icontu .iconfont{
        font-size: .3rem;
    } 
    .icontext{
        width: 2.4rem;
        height: .6rem;
        font-size: .25rem;
        line-height: .6rem;
    }
    .fuhao{
        display: flex;
        align-items: center;
        justify-content: center;
        width: .6rem;
        height: .6rem;
    } 
    .fuhao .iconfont{
        font-size: .2rem;
        border-radius: 50%;
    } 



     
</style>